<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>用户个人详细信息页面</title>

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.min.css}" media="all">
    <!--    导入bootstrap.js之前要先导入依赖的jquery-->
    <script type="text/javascript" th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.min.js}"></script>

</head>
<body>
<!--防止页面滚轮条隐藏引发的抖动-->
<style>
    *{
        margin:0;
        padding:0;
    }
    html {
        overflow-y: scroll;/*这一行代码会被 代码1 覆盖，我觉得是可以删除的，可能作者考虑到有可能下面的失效，那么不管有没有滚动条，在右边都会有一个灰色的区域，这也是一种解决方案，就是不管有没有滚动条，都预留位置，但是很难看啊*/
    }

    :root {
        overflow-y: auto;/*代码1*/
        overflow-x: hidden;/*横向就不使用滚动条*/
    }

    body {
        width: 100vw;
        overflow: hidden;/*超出100vw的内容都隐藏，实际我们设计的页面都不会超过100vw，而且一般会边距，所以一般滚动条的出现不会遮盖到内容*/
    }
</style>
<!-- 顶部logo跟登陆导航-->
<div th:replace="components/public/header :: html"></div>
<br/>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading"><h3 class="panel-title">我的账号</h3></div>
                <div class="panel-body">
                    <style>
                        .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
                            z-index: 2;
                            color: #fff;
                            background-color: #3B99FC;
                            border-color: #3B99FC;
                        }
                    </style>
                    <div class="list-group" style="height: 600px;">
                        <a href="javascript:;" data-info="1"  class="list-group-item active type-a">个人信息</a>
                        <a href="javascript:;" data-info="2"  class="list-group-item type-a">账号安全</a>
                        <a href="javascript:;" data-info="3"  class="list-group-item type-a">订单详情</a>
                    </div>
                </div>
            </div>
        </div>
        <script>
            /**
             * 切换面板
             * @param index 页面的下标 1为个人信息 2为账号安全 3为订单详情
             */
            $(".list-group-item").each(function () {//为每一个元素绑定一个点击事件

                $(this).click(function () {
                    //如果页面就是用户选择的页面则直接返回不需要请求
                    if($(this).hasClass('active'))
                        return;

                    let infoType = $(this).data('info');
                    let buttons = $('.type-a');
                    for(let i = 0; i<3;i++){
                        //移除激活状态
                        $(buttons[i]).removeClass('active');
                    }
                    $(this).addClass('active');//当前按钮激活状态
                    $('#info_div').load('/detail/type/' + infoType);
                })
            })
        </script>
        <div class="col-md-9">
            <style>
                .pass {
                    color: rgb(255, 146, 5);
                }
                .fail {
                    color: brown;
                }
                .lightBlue{
                    background-color: #FAFDFF;
                    border: 1px solid #A6BFDE;
                }
                .hugeFont{
                    font-size: 20px;
                    text-align: center;
                }
                .panel-default>.panel-heading {
                    color: #333;
                    background-color: #fcfcfc;
                    border-color: #ddd;
                }
                .midleFont{
                    font-size: 15px;
                    text-align: center;
                    border-radius: 5px;
                }
                .cancel{
                    width: 100px;
                    height: 30px;
                    background-color: rgb(241, 241, 241);
                    border: rgb(238, 238, 238) solid 2px;
                    border-radius: 5px;
                }
                .pay{
                    width: 100px;
                    height: 40px;
                    background-color: orange;
                    border-radius: 5px;
                    color: white;
                    font-size: 20px;
                    border: orange solid 2px;
                }
                .hide-div{
                    display: none;
                }
                .show-div{
                    display: block;
                }
            </style>
            <div class="panel panel-default">
                <div class="panel-body">
<!--                    此处切换页面-->
                    <div id="info_div" style="min-height: 660px">
                    </div>
                </div>
            </div>
        </div>
        <script th:inline="javascript">
            /**
             * 改变左栏的按钮激活样式
             */
            function changeActive(type){
                let buttons = $('.type-a');
                for(let i = 0; i<3;i++){
                    let bt = $(buttons[i]);
                    if(bt.data('info')!==type)
                        //移除激活状态
                        bt.removeClass('active');
                    else
                        bt.addClass('active');

                }
                $(this).addClass('active');//当前按钮激活状态
            }

            //为了页面一开始就加载页面
            onload = function() {
                let type = [[${infoType}]];
                $('#info_div').load('/detail/type/' + type);
                //改变页面的激活样式
                type = Number(type);
                changeActive(type);
            }
        </script>
    </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- 网页页尾 -->
<div th:insert="components/public/footer :: footer" ></div>
</body>
</html>